<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }
        
        h1 {
            text-align: center;
        }
        
        table {
            border: 2px solid #aaa;
            width: 60%;
            margin: auto;
            border-collapse: collapse;
        }
        
        th,
        td {
            border: 2px solid #bbb;
            padding: 5px;
        }
        
        tr td:last-child {
            text-align: center;
        }
        /*tr td:first-child img{vertical-align: middle;}*/
        
        tr td:nth-child(1) img {
            vertical-align: middle;
        }
        
        #num {
            text-align: center;
        }
        
        div {
            width: 60%;
            margin: auto;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <h1>购书清单</h1>
    <table>
        <thead>
            <tr>
                <th>
                    <label><input type="checkbox" class="check_all check"></label>全选
                </th>
                <th>书名</th>
                <th>单价</th>
                <th>作者</th>
                <th>出版社</th>
                <th>库存</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th class="checkbox"><input type="checkbox" class="check_one check"></th>
                <td><img src="book-images/dl.jpg" alt="">深度学习</td>
                <td>168</td>
                <td>赵英刚</td>
                <td>科学出版社</td>
                <td>129</td>
                <td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
            </tr>
            <tr>
                <th class="checkbox"><input type="checkbox" class="check_one check"></th>
                <td><img src="book-images/ml.jpg" alt="">机器学习</td>
                <td>88</td>
                <td>周志华</td>
                <td>清华大学出版社</td>
                <td class="amount">318</td>
                <td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
            </tr>
            <tr>
                <th class="checkbox"><input type="checkbox" class="check_one check"></th>
                <td><img src="book-images/cv.jpg" alt="">计算机视觉</td>
                <td>118</td>
                <td>吴占刚</td>
                <td>国防class="amount"工业出版社</td>
                <td class="amount">666</td>
                <td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
            </tr>
            <tr>
                <th class="checkbox"><input type="checkbox" class="check_one check"></th>
                <td><img src="book-images/dip.jpg" alt="">数字图像处理</td>
                <td>86</td>
                <td>赵一凡</td>
                <td>人民邮电出版社</td>
                <td>450</td>
                <td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
            </tr>
            <tr>
                <th class="checkbox"><input type="checkbox" class="check_one check"></th>
                <td><img src="book-images/webgl.jpg" alt="">webGL编程指南</td>
                <td>96</td>
                <td>彭星辰</td>
                <td>清华大学出版社</td>
                <td>99</td>
                <td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
            </tr>
            <tr>
                <th class="checkbox"><input type="checkbox" class="check_one check"></th>
                <td><img src="book-images/unity.jpg" alt="">Unity3D游戏开发</td>
                <td>79</td>
                <td>王飞</td>
                <td>浙江大学出版社</td>
                <td>300</td>
                <td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
            </tr>
        </tbody>
    </table>


    <h1>购物车</h1>
    <div>全选<label><input type="checkbox" class="check_all check"></label></div>
    <table>
        <thead>
            <tr>
                <th>书名</th>
                <th>单价</th>
                <th>数量</th>
                <th>金额</th>
                <th>删除</th>
            </tr>
        </thead>

        <tbody id="goods"></tbody>

        <tfoot>
            <tr>
                <td colspan="3">总计</td>
                <td id=total></td>
                <td><input type="button" value="删除" onclick=""></td>
            </tr>
        </tfoot>
    </table>


    <script>
        function add_book(btn) {
            var tr = btn.parentNode.parentNode
            var tds = tr.getElementsByTagName('td')
            var name = tds[0].innerHTML
            var price = tds[1].innerHTML
            var tbody = document.getElementById("goods")
            var row = tbody.insertRow()
            row.innerHTML = "<td>" + name + "</td>" +
                "<td>" + price + "</td>" +
                "<td align='center'>" +
                "<input type=button value='-' onclick=change(this,-1) style='width:20px'/>" +
                "<input type=text value='1' id=num size=1 readonly />" +
                "<input type=button value='+' onclick=change(this,+1) style='width:20px'/>" +
                "</td>" +
                "<td>" + price + "</td>" +
                "<td>" +
                "<input type=button value='删除' onclick='del(this)'/>" + "</td>"
            total()
        }

        function del(obj) {
            var tr = obj.parentNode.parentNode;
            // tr.remove()
            var tbody = tr.parentNode;
            tbody.removeChild(tr);
            total()
        }

        function total() {
            var tbody = document.getElementById("goods")
            var trs = tbody.getElementsByTagName("tr")
            var sum = 0
            for (var i = 0; i < trs.length; i++) {
                var tds = trs[i].getElementsByTagName("td")
                var money = tds[3].innerHTML
                sum += parseFloat(money)
            }
            var total = document.getElementById("total")
            total.innerHTML = sum
        }

        function change(btn, n) {
            var inputs = btn.parentNode.getElementsByTagName('input')
            var amount = parseInt(inputs[1].value)
            if (amount <= 1 && n < 0) {
                return
            }
            inputs[1].value = amount + n;
            amount = inputs[1].value

            var tr = btn.parentNode.parentNode
            var tds = tr.getElementsByTagName("td")
            var price = parseFloat(tds[1].innerHTML)
            price *= amount
            tds[3].innerHTML = price

            total()

        }


        var selectInput = document.getElementsByClassName("check"); //所有单选框
        var checkAllInput = document.getElementsByClassName("check_all"); //所有全选框
        //点击选择框
        for (var i = 0; i < selectInput.length; i++) {
            // console.log(selectInput[i]);
            // selectInput[i].onclick=function
            selectInput[i].onclick = function() {
                if (this.className.indexOf("check_all") >= 0) {
                    for (var j = 0; j < selectInput.length; j++) {
                        console.log(selectInput);
                        // selectInput[j].checked=selectInput[i].checked;
                        selectInput[j].checked = this.checked;
                    }
                } else {
                    for (var k = 0; k < checkAllInput.length; k++) {
                        checkAllInput[k].checked = false;
                    }
                }
                // getTotal();
                total();
            }
        }
    </script>
</body>

</html>